<template>
	<baseDialog ref="dialogRef" :title="dialogTitle" width="680px" @confirm="handleSubmit" @close="handleClose">
		<el-form ref="formRef" :model="rules" size="default" label-width="90px">
			<el-row :gutter="35">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb-2">
					<el-form-item label="上级菜单：" prop="pid">
						<el-cascader :options="menuOptions" :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
							placeholder="请选择上级菜单" clearable v-model="formData.pid">
							<template #default="{ node, data }">
								<span>{{ data.name }}</span>
								<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
							</template>
						</el-cascader>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb-2">
					<el-form-item label="菜单类型：" prop="type">
						<el-radio-group v-model="formData.type">
							<el-radio label="M">目录</el-radio>
							<el-radio label="C">菜单</el-radio>
							<el-radio label="A">按钮</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb-2">
					<el-form-item label="菜单名称：" prop="name">
						<el-input v-model="formData.name" placeholder="请输入菜单名称" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col v-if="['M', 'C'].includes(formData.type)" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb-2">
					<el-form-item label="菜单图标：" prop="icon">
						<iconSelector placeholder="请输入菜单图标" v-model="formData.icon" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb-2"
					v-if="['M', 'C'].includes(formData.type)">
					<el-form-item label="路由地址：" prop="paths">
						<el-input v-model="formData.paths" placeholder="请输入路由地址" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb-2"
					v-if="['C', 'A'].includes(formData.type)">
					<el-form-item label="权限标识：" prop="perms">
						<el-input v-model="formData.perms" placeholder="请输入权限标识" clearable></el-input>
					</el-form-item>
				</el-col>
				<template v-if="formData.type === 'C'">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb-2">
						<el-form-item label="组件路径：" prop="component">
							<el-input v-model="formData.component" placeholder="请输入组件路径" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb-2">
						<el-form-item label="路由参数：" prop="params">
							<el-input v-model="formData.params" placeholder="请输入路由参数" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb-2">
						<el-form-item label="页面缓存：" prop="is_keep_alive">
							<el-radio-group v-model="formData.is_keep_alive">
								<el-radio :label="1">缓存</el-radio>
								<el-radio :label="0">不缓存</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb-2">
						<el-form-item label="是否固定：" prop="is_affix">
							<el-radio-group v-model="formData.is_affix">
								<el-radio :label="1">固定</el-radio>
								<el-radio :label="0">不固定</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb-2">
						<el-form-item label="是否外链：" prop="is_link">
							<el-radio-group v-model="formData.is_link" :disabled="formData.is_iframe">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb-2">
						<el-form-item label="是否内嵌：" prop="is_iframe">
							<el-radio-group v-model="formData.is_iframe" @change="onSelectIframeChange">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb-2">
						<el-form-item label="外链地址：" prop="link_url">
							<el-input v-model="formData.link_url" placeholder="请输入外链地址" clearable
								:disabled="!formData.is_link"> </el-input>
						</el-form-item>
					</el-col>
				</template>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb-2">
					<el-form-item label="菜单排序：" prop="sort">
						<el-input-number v-model="formData.sort" controls-position="right" placeholder="请输入排序"
							class="w100" />
					</el-form-item>
				</el-col>
				<el-col v-if="['M', 'C'].includes(formData.type)" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb-2">
					<el-form-item label="是否显示：" prop="is_hide">
						<el-radio-group v-model="formData.is_hide">
							<el-radio :label="0">显示</el-radio>
							<el-radio :label="1">隐藏</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col v-if="['M', 'C'].includes(formData.type)" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb-2">
					<el-form-item label="菜单状态：" prop="is_disable">
						<el-radio-group v-model="formData.is_disable">
							<el-radio :label="0">正常</el-radio>
							<el-radio :label="1">停用</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</baseDialog>
</template>

<script setup lang="ts" name="authMenuEdit">
import { ref, shallowRef, reactive, computed, onMounted, toRaw } from 'vue';
import type { FormInstance } from 'element-plus';
import { setBackEndControlRefreshRoutes } from '/@/router/backEnd';
import { menuAdd, menuEdit, menuDetail, menuLists } from '/@/api/auth/menu';

const dialogRef = ref(null);

const dialogType = ref('add');

const dialogTitle = computed(() => {
	return dialogType.value == 'add' ? '添加菜单' : '编辑菜单';
});

const emit = defineEmits(['submit', 'close']);

const formRef = shallowRef<FormInstance>();

const formData = reactive({
	id: 0, // 菜单id
	pid: 0, // 上级菜单id
	type: 'M', // 菜单类型 M=目录，C=菜单，A=按钮
	name: '', // 菜单名称
	icon: '', // 菜单图标
	sort: 0, // 菜单排序
	perms: '', // 权限标识
	paths: '', // 路由地址
	component: '', // 前端组件路径
	selected: '', // 选中路径
	params: '', // 路由参数
	is_keep_alive: 0, // 是否缓存
	is_link: 0, // 是否外链
	link_url: '', // 外链地址
	is_iframe: 0, // 是否内嵌
	is_hide: 0, // 是否隐藏
	is_affix: 0, // 是否固定
	is_disable: 0, // 是否禁用
});

const rules = reactive({
	name: [{ required: true, message: '请输入菜单名称', trigger: ['blur'] }],
	paths: [{ required: true, message: '请输入路由地址', trigger: ['blur'] }],
	component: [{ required: true, message: '请输入前端组件地址', trigger: ['blur'] }],
});

const menuOptions = ref([]);

// 获取上级菜单
const getMenuData = async () => {
	menuOptions.value = await menuLists({ type: ['M', 'C'] });
};

// 切换内嵌/外链
const onSelectIframeChange = () => {
	if (formData.is_iframe) formData.is_link = 1;
	else formData.is_link = 0;
};

// 刷新路由
const RefreshRoute = async () => {
	await setBackEndControlRefreshRoutes();
}

const handleSubmit = async () => {
	await formRef.value?.validate(async (valid: boolean) => {
		if (!valid) return;
		dialogType.value == 'add' ? await menuAdd(formData) : await menuEdit(formData);
		dialogRef.value?.close();
		RefreshRoute();
		emit('submit');
	});
};

const setFormData = async (row: any, callback: any) => {
	const data = await menuDetail({
		id: row.id,
	});

	for (const key in formData) {
		if (data[key] != null && data[key] != undefined) {
			formData[key] = data[key];
		}
	}
	callback()
};

const setFormPid = async (row: any) => {
	formData.pid = row.id;
};

const handleClose = () => {
	emit('close');
};

const open = (type = 'add') => {
	dialogType.value = type;
	dialogRef.value?.open();
};

onMounted(() => {
	getMenuData();
});

defineExpose({
	open,
	setFormData,
	setFormPid,
});
</script>

<style lang="scss"></style>
